﻿<script src="../jquery/jquery-2.2.3.min.js"></script>
<script src="../Sortable/Sortable.js"></script>

<div id="weixin-menus-root" class="boxfix">
    <div class="rootHandle" style="width: 33.33%; float: left;">
        <div style="margin: 10px; border: 1px solid rgb(128, 128, 128); background-color: rgb(230, 230, 230); line-height: 30px; box-sizing: border-box; text-align: center;">menu1</div>
        <div class="subItems">
            <div style="margin: 10px; border: 1px solid rgb(189, 211, 219); background-color: rgb(232, 244, 248); line-height: 30px; box-sizing: border-box; text-align: center;">1-1</div>
            <div style="margin: 10px; border: 1px solid rgb(189, 211, 219); background-color: rgb(232, 244, 248); line-height: 30px; box-sizing: border-box; text-align: center;">1-2</div>
            <div style="margin: 10px; border: 1px solid rgb(189, 211, 219); background-color: rgb(232, 244, 248); line-height: 30px; box-sizing: border-box; text-align: center;">1-3</div>
            <div style="margin: 10px; border: 1px solid rgb(189, 211, 219); background-color: rgb(232, 244, 248); line-height: 30px; box-sizing: border-box; text-align: center;">1-4</div>
            <div style="margin: 10px; border: 1px solid rgb(189, 211, 219); background-color: rgb(232, 244, 248); line-height: 30px; box-sizing: border-box; text-align: center;">1-5</div>
        </div>
        <div style="line-height: 30px; text-align: center; display: none;">添加二级菜单</div>
    </div>
    <div class="rootHandle" style="width: 33.33%; float: left;">
        <div style="margin: 10px; border: 1px solid rgb(128, 128, 128); background-color: rgb(230, 230, 230); line-height: 30px; box-sizing: border-box; text-align: center;">menu2</div>
        <div class="subItems">
            <div style="margin: 10px; border: 1px solid rgb(189, 211, 219); background-color: rgb(232, 244, 248); line-height: 30px; box-sizing: border-box; text-align: center;">2-1</div>
        </div>
        <div style="line-height: 30px; text-align: center;">添加二级菜单</div>
    </div>
    <div style="width: 25%; float: left; line-height: 50px; text-align: center;">添加一级菜单</div>
</div>

<script>
    // Multi groups
    Sortable.create($("#weixin-menus-root")[0], {
        animation: 150,
        draggable: '.rootHandle',
        handle: '.rootHandle',
        onStart: function (/**Event*/evt) { // 拖拽开始
            debugger;
            var itemEl = evt.item;// 当前拖拽的html元素
        },
        onEnd: function (/**Event*/evt) { // 拖拽结束
            debugger;
            var itemEl = evt.item;
        }
    });

    [].forEach.call($("#weixin-menus-root")[0].getElementsByClassName('subItems'), function (el) {
        debugger;
        Sortable.create(el, {
            group: 'sub',
            animation: 150,
            onStart: function (/**Event*/evt) { // 拖拽开始
                debugger;
                var itemEl = evt.item;// 当前拖拽的html元素
            },
            onEnd: function (/**Event*/evt) { // 拖拽结束
                debugger;
                var itemEl = evt.item;
            }
        });
    });
</script>